<template>
<view>
<view class="container">

  <!-- 商品部分 -->
  <view class="commitProduct_container">
    <view class="commitProduct_item">
      <view class="commitProduct_item_info">
        <view class="commitProduct_item_info_commit">
          <!-- <view class='commitProduct_item_info_icon'>
            <image mode='aspectFit' src='{{Data.itemIcon}}'></image>
          </view> -->
          <view class="commitProduct_item_info_commitcontent">
              <textarea placeholder="请写下宝贝的评价吧" @input="getCommitContent"></textarea>
          </view>
        </view>
        <view class="commitProduct_item_info_commit_images"> 
            <view class="comment_image_list" v-for="(image,index) in upLoadImageList" :key="index">
              <image mode="scaleToFill" :src="image" :data-url="image" :data-urls="upLoadImageList" @tap="lookBigImage" style="width:190rpx;height:190rpx"></image>
              <view class="deleImageView" :data-index="index" @click.stop="deleSelectImage"><icon color="red" size="16" type="clear"></icon></view>
            </view>
            <view class="crameContainer" @click.stop="addCommitImage" style="width:190rpx;height:190rpx">
              <image class="crame" src="https://image1.sansancloud.com/xianhua/2020_3/7/20/27/36_676.jpg?x-oss-process=style/preview_120" mode="widthFix"></image>
            </view>
        </view>

      </view>
      <!-- 评分模块 -->
      <view class="scollViews2">
        <view class="name">商品评分</view>
        <view class="star_container">
          <view class="star" data-scroll="1" @tap="productScroll">
            <block v-if="commentOrder.pingfen > 0"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="2" @tap="productScroll">
            <block v-if="commentOrder.pingfen > 1"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="3" @tap="productScroll">
            <block v-if="commentOrder.pingfen > 2"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="4" @tap="productScroll">
            <block v-if="commentOrder.pingfen > 3"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="5" @tap="productScroll">
            <block v-if="commentOrder.pingfen > 4"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 店铺部分 -->
<block v-if="Data">
  <view class="commitShop_container">
    <view class="commitShop_container_name">店铺评分</view>
     <view class="scollViews">
        <view class="name">商品符合度</view>
        <view class="star_container">
          <view class="star" data-scroll="1" @tap="bindScoll_1Fun">
            <block v-if="commentOrder.shangpinfuhedu > 0"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="2" @tap="bindScoll_1Fun">
            <block v-if="commentOrder.shangpinfuhedu > 1"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="3" @tap="bindScoll_1Fun">
            <block v-if="commentOrder.shangpinfuhedu > 2"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="4" @tap="bindScoll_1Fun">
            <block v-if="commentOrder.shangpinfuhedu > 3"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="5" @tap="bindScoll_1Fun">
            <block v-if="commentOrder.shangpinfuhedu > 4"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
        </view>
      </view>

       <view class="scollViews">
        <view class="name">店家服务态度</view>
        <view class="star_container">
          <view class="star" data-scroll="1" @tap="bindScoll_2Fun">
            <block v-if="commentOrder.dianjiafuwutaidu > 0"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="2" @tap="bindScoll_2Fun">
            <block v-if="commentOrder.dianjiafuwutaidu > 1"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="3" @tap="bindScoll_2Fun">
            <block v-if="commentOrder.dianjiafuwutaidu > 2"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="4" @tap="bindScoll_2Fun">
            <block v-if="commentOrder.dianjiafuwutaidu > 3"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="5" @tap="bindScoll_2Fun">
            <block v-if="commentOrder.dianjiafuwutaidu > 4"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
        </view>
      </view>

      <view class="scollViews">
        <view class="name">配送员服务态度</view>
        <view class="star_container">
          <view class="star" data-scroll="1" @tap="bindScoll_4Fun">
            <block v-if="commentOrder.peisongyuanfuwutaidu > 0"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="2" @tap="bindScoll_4Fun">
            <block v-if="commentOrder.peisongyuanfuwutaidu > 1"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="3" @tap="bindScoll_4Fun">
            <block v-if="commentOrder.peisongyuanfuwutaidu > 2"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="4" @tap="bindScoll_4Fun">
            <block v-if="commentOrder.peisongyuanfuwutaidu > 3"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="5" @tap="bindScoll_4Fun">
            <block v-if="commentOrder.peisongyuanfuwutaidu > 4"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
        </view>
      </view>

      <view class="scollViews">
        <view class="name">发货速度</view>
        <view class="star_container">
          <view class="star" data-scroll="1" @tap="bindScoll_3Fun">
            <block v-if="commentOrder.wuliufahuosudu > 0"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="2" @tap="bindScoll_3Fun">
            <block v-if="commentOrder.wuliufahuosudu > 1"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="3" @tap="bindScoll_3Fun">
            <block v-if="commentOrder.wuliufahuosudu > 2"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="4" @tap="bindScoll_3Fun">
            <block v-if="commentOrder.wuliufahuosudu > 3"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
          <view class="star" data-scroll="5" @tap="bindScoll_3Fun">
            <block v-if="commentOrder.wuliufahuosudu > 4"><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_803.jpg?x-oss-process=style/preview_120"></image></block>
            <block v-else><image src="https://image1.sansancloud.com/naifen/2019_5/31/17/7/11_828.jpg?x-oss-process=style/preview_120"></image></block>
          </view>
        </view>
      </view>
  </view>
</block>
</view>

<!-- 底部评价按钮 -->

<view class="bottomButn_container">
  <view class="bottomButn_container_height"></view>
  <view class="bottomButn">
    <button :style="'background:' + setting.platformSetting.defaultColor" @tap="commitProduct">评价</button>
  </view>
</view>
</view>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      upLoadImageList: [],
      Data: null,
      commentOrder: {},
      checked: 2,
      //checkBox
      sysWidth: 320 //图片大小

    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("============pinglun========", options);
    this.getItem(options.orderNo);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.setData({
      setting: getApp().globalData.setting
    });
    this.setData({
      sysWidth: getApp().globalData.sysWidth
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    /* 添加商品评论图片 */
    addCommitImage: function (e) {
      var that = this;
      wx.chooseImage({
        count: 6,
        // 默认9
        sizeType: ['original', 'compressed'],
        // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'],
        // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          console.log("======addCommitImage=======", res);
          let tempFilePaths = res.tempFilePaths;
          // that.addCommitImageToData(tempFilePaths);
          that.uploadImage(tempFilePaths,tempFilePaths.length)
        }
      });
    },
    uploadImage: function (tempFilePaths, count) {
      if (!getApp().globalData.loginUser) {
        getApp().globalData.echoErr('用户未登录');
        return;
      }

      console.log(count);
      let that = this;
      let param = {
        userId: getApp().globalData.loginUser.id
      };
      var customIndex = getApp().globalData.AddClientUrl("/file_uploading.html", param, 'POST');
      wx.uploadFile({
        url: customIndex.url,
        //仅为示例，非真实的接口地址
        header: {
          'content-type': 'multipart/form-data'
        },
        filePath: tempFilePaths[count - 1],
        name: 'file',
        formData: customIndex.params,
        success: function (res) {
          let upLoadImageList =  that.upLoadImageList
          var data = res.data;
          console.log(data);

          if (typeof data == 'string') {
            data = JSON.parse(data);
            console.log(data);

            if (data.errcode == 0) {
              upLoadImageList.push(data.relateObj.imageUrl);
              that.setData({
                upLoadImageList: upLoadImageList
              });
            }
          } else if (typeof data == 'object') {
            if (data.errcode == 0) {
              upLoadImageList.push(data.relateObj.imageUrl);
              that.setData({
                upLoadImageList: upLoadImageList
              });
            }
          } //do something
        },
        fail: function (e) {
          console.log(e);
        },
        complete: function (e) {
          if (count == 1 || count < 1) {
            return false;
          } else {
            that.uploadImage(tempFilePaths, --count);
          }
        }
      });
    },
    lookBigImage: function (e) {
      let url = e.currentTarget.dataset.url;
      let urls = e.currentTarget.dataset.urls;
      getApp().globalData.lookBigImage(url, urls);
    },
    deleSelectImage: function (e) {
      let index = e.currentTarget.dataset.index;
      let upLoadImageList = this.upLoadImageList; //upLoadImageList = upLoadImageList[index]

      upLoadImageList.splice(index, 1);
      this.setData({
        upLoadImageList: upLoadImageList
      });
    },
    /* 把图片加到orderItem属性里面 */
    addCommitImageToData: function (tempFilePaths) {
      console.log("======addCommitImageToData=======", tempFilePaths);
      let that = this;
      let commentOrder = that.commentOrder;
      commentOrder.commentImages = tempFilePaths; //commentOrder.commentImages.concat(tempFilePaths)

      that.setData({
        commentOrder: commentOrder
      });
      console.log("that.commentOrder",that.commentOrder,commentOrder)
    },

    /* 商品评分 */
    productScroll: function (e) {
      let that = this;
      let commentOrder = that.commentOrder;
      let scoll = e.currentTarget.dataset.scroll;
      commentOrder.pingfen = scoll;
      this.setData({
        commentOrder: commentOrder
      });
    },

    /* 选择分数  心形 */
    //商品符合度
    bindScoll_1Fun: function (e) {
      let that = this;
      let commentOrder = that.commentOrder;
      let scoll = e.currentTarget.dataset.scroll;
      commentOrder.shangpinfuhedu = scoll;
      this.setData({
        commentOrder: commentOrder
      });
    },
    //店家服务态度
    bindScoll_2Fun: function (e) {
      let that = this;
      let commentOrder = that.commentOrder;
      let scoll = e.currentTarget.dataset.scroll;
      commentOrder.dianjiafuwutaidu = scoll;
      this.setData({
        commentOrder: commentOrder
      });
    },
    //发货速度
    bindScoll_3Fun: function (e) {
      let that = this;
      let commentOrder = that.commentOrder;
      let scoll = e.currentTarget.dataset.scroll;
      commentOrder.wuliufahuosudu = scoll;
      this.setData({
        commentOrder: commentOrder
      });
    },
    //配送员服务态度
    bindScoll_4Fun: function (e) {
      let that = this;
      let commentOrder = that.commentOrder;
      let scoll = e.currentTarget.dataset.scroll;
      commentOrder.peisongyuanfuwutaidu = scoll;
      this.setData({
        commentOrder: commentOrder
      });
    },

    /* 拿到评价的内容 */
    getCommitContent: function (e) {
      console.log("=======getCommitContent======", e);
      let commitContent = e.detail.value;
      let that = this;
      let commentOrder = that.commentOrder;
      commentOrder.commitContent = commitContent; //评论

      this.setData({
        commentOrder: commentOrder
      });
    },

    /* 商品评价 */
    commitProduct: function () {
      var that = this;
      console.log("that.data.commentOrder", that.commentOrder);
      let params = JSON.parse(JSON.stringify(that.commentOrder));
      params.commentImages = that.upLoadImageList.join(','); 
      getApp().globalData.showToastLoading('loading', true);
      let customIndex = getApp().globalData.AddClientUrl("/comment_order.html", params, 'post');
      wx.request({
        url: customIndex.url,
        data: customIndex.params,
        header: getApp().globalData.headerPost,
        method: 'POST',
        success: function (res) {
          console.log('---success----product----');
          console.log(res.data);
          wx.showToast({
            title: '评价成功',
            icon: 'success',
            duration: 1000
          });
          setTimeout(function () {
            wx.navigateBack();
          }, 1000);
        },
        fail: function (res) {
          console.log('---fail----product----');
        },
        complete: function (res) {
          wx.hideLoading();
        }
      });
    },
    //初始化分数
    chushihuaScroll: function (data) {
      let that = this;
      let commentOrder = that.commentOrder;
      commentOrder.commitContent = ''; //评论

      commentOrder.shangpinfuhedu = 5; //商品符合度评分

      commentOrder.pingfen = 5; //评分

      commentOrder.dianjiafuwutaidu = 5; //店家服务态度评分

      commentOrder.wuliufahuosudu = 5; //物流发货速度评分

      commentOrder.peisongyuanfuwutaidu = 5; //配送员服务态度评分

      commentOrder.commentImages = []; //图片

      commentOrder.shopId = data.belongShop; //店铺

      commentOrder.orderNo = data.orderNo; //店铺

      that.setData({
        commentOrder: commentOrder
      });
    },
    //获取数据
    getItem: function (e) {
      var orderItemId = e;
      var that = this;
      var getParams = {};
      getParams.orderNo = orderItemId;
      var customIndex = getApp().globalData.AddClientUrl("/get_order_detail.html", getParams);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          that.setData({
            Data: res.data
          });
          that.chushihuaScroll(res.data);
          console.log(res.data);
        },
        fail: function (res) {
          getApp().globalData.loadFail();
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>